<template>
  <el-dialog title="月奖发起" :close-on-click-modal="false" :visible.sync="visible" width="50vw">
    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()" label-width="110px" style="height: 200px;">
      <div>
        <el-row>
          <el-col :span="24">
            <el-form-item label="负责部门" prop="jjDeptId">
              <el-select v-model="dataForm.jjDeptId" placeholder="请选择负责部门" class="xiaLa" style="width: 100%" :clearable="true" @change="switchDepartment">
                <el-option v-for="(item,index) in fzbmData" :key="index" :label="item.deptName" :value="item.deptId"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="奖金名称" prop="jjMc">
              <el-input v-model="dataForm.jjMc" placeholder="奖金名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="人员分组" :prop="'dataList.ryfzId'" :rules="[{ required: true, message: '请选择人员分组', trigger: 'blur' }]">
              <el-select v-model="dataForm.dataList.ryfzId" clearable placeholder="请选择人员分组" style="width:100%;">
                <el-option v-for="item in fzData" :key="item.id" :label="item.ryfzMc" :value="item.id"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="奖金项名称" :prop="'dataList.jjxId'" :rules="[{ required: true, message: '请选择奖金项', trigger: 'blur' }]">
              <el-select v-model="dataForm.dataList.jjxId" clearable placeholder="请选择奖金项" style="width:100%;" @change="jjxHandle">
                <el-option v-for="item in cityOptions" :key="item.id" :label="item.jjxMc" :value="item.id"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="奖金项日期" :prop="'dataList.jjxDate'" :rules="[{ required: true, message: '请输入奖金项日期', trigger: 'blur' }]">
              <!-- <el-input v-model="dataForm.dataList.jjxDate" placeholder="请输入奖金项日期" style="width:100%;"></el-input> -->
              <el-date-picker v-model="dataForm.dataList.jjxDate" type="date" value-format="yyyy-MM-dd HH:mm:ss" placeholder="奖金项日期" style="width: 100%"></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="开始日期" prop="jjDateq">
              <el-date-picker v-model="dataForm.jjDateq" type="date" value-format="yyyy-MM-dd HH:mm:ss" placeholder="开始日期" style="width: 100%"></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="结束日期" prop="jjDatez">
              <el-date-picker v-model="dataForm.jjDatez" type="date" value-format="yyyy-MM-dd HH:mm:ss" placeholder="结束日期" style="width: 100%"></el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>
      </div>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="dataFormSubmit()" v-if="canSubmit">确定</el-button>
      <el-button type="primary" plain @click="visible = false">取消</el-button>
    </span>
  </el-dialog>
</template>

<script>
/*!
 * 绩效考核-奖金分配-月度奖金分配
 *
 * @author zmk
 * @date 2021-09-03 10:11:35
 */
import {saveYdjj} from '@/api/jiangjin/jiangjinfpjjfpdjb'
import {getRyfzbList} from '@/api/jiangjin/jiangjinryfzb'
import {getJjDeptJjx} from '@/api/jiangjin/jiangjinjjxxxb'
import {getJiangJinBm} from '@/api/admin/dept'

export default {
  data() {
    return {
      visible: false,
      canSubmit: false,
      fzData: [],
      cityOptions: [],
      jjxList: [],//奖金项list
      fzbmData: [],
      dataForm: {
        id: 0,
        jjDeptId: '',
        jjDeptName: '',
        sfZx: '是',
        jjLx: 2,
        fpLy: 2,
        gqTime: new Date().getFullYear() + "-12-31 23:59:59",
        jjMc: '',
        jjDateq: '',
        jjDatez: '',
        dataList: {
          jjxId: '',
          ryfzId: '',
          jjxName: '',
          jjxDate: ''
        }
      },
      dataRule: {
        jjDeptId: [
          {required: true, message: '请选择负责部门', trigger: 'blur'}
        ],
        jjMc: [
          {required: true, message: '奖金名称不能为空', trigger: 'blur'}
        ],
        jjDateq: [
          {required: true, message: '开始日期不能为空', trigger: 'blur'}
        ],
        jjDateq: [
          {required: true, message: '开始日期不能为空', trigger: 'blur'}
        ],
        jjDatez: [
          {required: true, message: '结束日期不能为空', trigger: 'blur'}
        ],
      }
    }
  },
  methods: {
    //奖金项数据处理
    jjxHandle(value) {
      for (var a in this.cityOptions) {
        if (this.cityOptions[a].id == value) {
          this.dataForm.dataList.jjxName = this.cityOptions[a].jjxMc;
          break;
        }
      }
    },
    //初始化
    csh() {
      this.fzData = [];
      this.jjxList = [];
      this.cityOptions = [];
      this.dataForm = {
        id: 0,
        jjDeptId: '',
        jjDeptName: '',
        sfZx: '是',
        jjLx: 2,
        fpLy: 2,
        gqTime: new Date().getFullYear() + "-12-31 23:59:59",
        jjMc: '',
        jjDateq: '',
        jjDatez: '',
        dataList: {
          jjxId: '',
          ryfzId: '',
          jjxName: '',
          jjxDate: ''
        }
      };
    },
    init(id) {
      this.csh();
      this.dataForm.id = id || 0;
      this.visible = true;
      this.canSubmit = true;
      this.$nextTick(() => {
        this.$refs['dataForm'].resetFields()

        getJiangJinBm().then(res => {
          if (res.data.data.length > 0) {
            this.fzbmData = res.data.data;
          }
        });
      })
    },
    switchDepartment(deptId) {
      this.csh();
      if (deptId != '') {
        getJjDeptJjx(deptId).then(res => {
          this.cityOptions = res.data.data;
        })

        getRyfzbList(deptId).then(res => {
          this.fzData = res.data.data;
        });

        for (var a in this.fzbmData) {
          if (this.fzbmData[a].deptId == deptId) {
            this.dataForm.jjDeptId = this.fzbmData[a].deptId;
            this.dataForm.jjDeptName = this.fzbmData[a].deptName;
          }
        }
      }
    },
    // 表单提交
    dataFormSubmit() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          //结束大于等于开始
          if (this.dataForm.jjDatez < this.dataForm.jjDateq) {
            this.$notify.closeAll();
            this.$notify.error("结束时间应大于开始时间。");
            return;
          }

          this.dataForm.jjxXq = JSON.stringify(this.dataForm.dataList);
          this.canSubmit = false;
          saveYdjj(this.dataForm).then(data => {
            this.$notify.closeAll();
            this.$notify.success('添加成功')
            this.visible = false
            this.$emit('refreshDataList')
          }).catch(() => {
            this.canSubmit = true;
          });
        }
      })
    },
  }
}
</script>
<style scoped>
.el-divider {
  background-color: #fff
}
</style>
